<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><title><%=@page_title || "测评系统量表使用手册"%></title></title>
<link href="/stylesheets/survey_public.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="/javascripts/jquery/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/javascripts/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/javascripts/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="/javascripts/jquery/ui/ui.accordion.js"></script>
<script src="/validation/lib/prototype.js" type="text/javascript"></script>
<script src="/validation/lib/effects.js" type="text/javascript"></script>
<script src="/validation/validation_cn.js" type="text/javascript"></script>
<style>
#content{ width:885px; float:left; min-height: 700px}
.content01{ width:885px; float:left; height:42px; border-bottom:1px solid #1a80d0;}
#guan{ width:190px; height:42px; line-height:42px; padding-left:112px; float:left;}
#guan li{ width:50px; float:left;}
#guan2{ width:190px; height:42px; line-height:42px; float:left;}
#guan2 li{ width:60px; float:left;}
#text{ width:114px; height:20px; border:1px solid #a5acb2; margin-top:10px;}
#guan3{ width:92px; float:right; padding-right:96px;}
#guan3 li{ width:92px; height:34px; padding:9px 0 0 0px; float:left;}

.content02{ width:860px; line-height:45px; float:left; padding-left:25px;}

.content03{ width:819px; float:left; padding:5px 0 0 68px;}
.STYLE1 {color: #FFFFFF}
.back{ width:102px; height:35px; float:right; padding-right:20px; margin-top:40px;}
#footer{ width:100%; height:200px; float:left; background:url(/images/user/report_list/footer.jpg) no-repeat; text-align:center; color:#295c72;}
#footer h1{ margin-top:100px;}
</style>
<script type="text/javascript">
$(function() {
        $("#accordion").accordion({
                collapsible: true,
                autoHeight: false
        });
});

function showManual(id){
  $('.manual-class').hide();
  //$('#manual' + id).show('Drop', '', 100);
  $('#manual' + id).show();
}
</script>
</head>

<body>
  <div id="page">

    <div id="header">
      <ol>
        <li><img src="/images/user/prof_survey/biao_05.jpg" width="271" height="53" /></li>
      </ol>
      <ul>
        <li> <%=current_user.name%></li>
        <li><a href="/login/logout">安全退出</a></li>
      </ul>
    </div>

    <div id="content">
      <div class="page" style="margin:10px 0 0 50px">

<% part_num = 0 %>
<!---------------form--------------->
<% form_for(:test, :url => { :action => "prof_result" },
  :html => {:name=>'testQuestionForm', :id=>'testQuestionForm', :class=>"required-validate", :onsubmit => "return checkSelect(#{@test.parts.size}, 1)"}) do |f|%>
  <% if current_user.tested?(Survey.find(@test.id)) %>
    <input type="hidden" name="retest" value="yes"/>
  <% end %>
  <input type="hidden" name="test_id" value="<%=@test.id%>"/>
  <div id="content-top">
    <div id="speed" style="display:none">
      <div id="speed2">
        测试开始时间:<font color="red" id="start_time"></font>&nbsp;&nbsp;&nbsp;
        测试已用时:&nbsp;<font color="red" id="timer"></font>
      </div>
    </div>
  </div>

  <div id="username-div" style="margin-left : 20px;margin-right : 10px ;margin-top :10px ;">
    <div id="message" style="display: none;">

      <font color="#FD0240"><span>请填写测试者年龄和职业信息：</span></font></div><br />
       姓&nbsp;&nbsp;&nbsp;&nbsp;名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="text" id="username"name="username"
            size="15" value=""  style="height:18px; border:1px solid #a5acb2;"/>(不填为匿名)<br /><br />
       年&nbsp;&nbsp;&nbsp;&nbsp;龄：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="text"id="age" name="age"
            class="validate-integer" value=""size="6"  style="height:18px; border:1px solid #a5acb2;"/><br /><br />
       性&nbsp;&nbsp;&nbsp;&nbsp;别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <span style="border:1px solid #a5acb2; height:20px;position:absolute; overflow:hidden;float:left; margin:-5px 0 0 0;">
          <select name="gender" id="gender" class="" style="margin:-1px;">
                           <option value="男">男&nbsp;&nbsp;&nbsp;  </option>
                           <option value="女">女&nbsp;&nbsp;&nbsp;  </option>
          </select>
       </span><br/><br />

       职&nbsp;&nbsp;&nbsp;&nbsp;业：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="text" id="perfession" class=""
            name="perfession" size="15" value="" style="height:18px; border:1px solid #a5acb2;"/><br/><br />
       教育程度：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       <span style="border:1px solid #a5acb2; height:20px;position:absolute; overflow:hidden;float:left; margin:-5px 0 0 0;">
         <select name="edu_status" id="edu_status"   class="" style="margin:-1px;">
                           <option value="硕士">硕士</option>
                           <option value="本科">本科</option>
                           <option value="专科">专科</option>
                           <option value="大专">大专</option>
                           <option value="高中">高中</option>
                           <option value="高中以下">高中以下</option>
         </select>
       </span><br/><br />

       <a href="#" onclick="check()">
          <img src="/images/user/prof_surveys/kaishiceshi.jpg" width="80" height="26" />
       </a>

       <script>
          function check(){
            if (!(document.getElementById("age").value == "")&&!(document.getElementById("perfession").value == "")){
              Element.show('part0');
              Element.hide('username-div');
              settime();
              DoCallTimer();
              $('speed').show();
            }else{
              Element.show('message');
            }
          }
       </script>
  </div>

  <% Part.find(:all, :conditions => "survey_id = #{@test.id}", :include => :questions).each do |part| %>
    <% if part_num == 0 %>
    <div id="part<%=part_num%>" class="part-div" style="margin:10px 0 10px 10px;display: none;">
      <div id="user_guide" style="margin-left:10px;margin-top:10px;">
        <b>指导语：</b>
        <p>
          <%=@test.user_guide%>
        </p>
      </div>
      <br/>
    <% else %>
    <div id="part<%=part_num%>" class="part-div" style="margin:10px 0 10px 10px;display: none;">
    <% end %>

      <b><!--第<%= part_num + 1 %>部分-->
        <%= part.name %>&nbsp;&nbsp;
      </b>
      <%= part.instruction %><br/>
      <p style="text-indent:2em"></p><br/>

    <%= hidden_field_tag "test_id", @test.id %>

    <% i = 0 %>
    <% Question.find(:all, :conditions => "part_id=#{part.id}", :include => :choices).each do |question| %>
      <% i += 1 %>
      <%= hidden_field_tag "question_id[]", question.id %>
      <input id="question<%=question.id%>" name="question<%=question.id%>[value]"
             class="<%=part_num%>question-value" type="hidden" value="null"/>
      <input name="question<%=question.id%>[part_id]" type="hidden" value="<%=question.part.id %>"/>
      <input id="question-choice<%=question.id%>" name="question<%=question.id%>[choice]"
             class="<%=part_num%>question-choice" type="hidden" value="null"/>

      <table width="90%" border="0" cellpadding="13" cellspacing="0">

        <tbody><tr>
              <td class="cs_title_1211" align="left">
              <a name="position_6287">
                  <%= i %> .
                  <%= question.description %>
              </a>
              </td>
          </tr>
          <tr>
              <td align="center">
              <table width="96%" border="0" cellpadding="13" cellspacing="0">

                  <tbody>
                    <tr><td height="10px"></td></tr>
                  <% choice_count=0%>
                  <% question.choices.each do |c| %>
                  <tr style="cursor: pointer;" onmousemove="this.bgColor='#F4F4F4'" onmouseout="this.bgColor=''" bgcolor="">
                   <td width="18px"><%=(65+choice_count).chr %> </td>
                      <td class="cs_daan_1211" onclick="nextItem(<%=question.id%>,<%=c.id%>,3,24,<%=(65+choice_count) %>);" width="20">
                        <input id="answervalue_<%=c.id%>" name="itemanswers_<%= question.id%>" value="<%=c.value%>" type="hidden">
                        <img src="/images/user/test/chooseblue.gif" id="<%=c.id %>" alt=""/>
                      </td>
                      <td class="cs_daan_1211" onclick="nextItem(<%=question.id%>,<%=c.id %>,3,24,<%=(65+choice_count) %>);">
                        <%= c.content %>
                      </td>
                  </tr>
                    <tr><td height="15px"></td></tr>
                  <% choice_count += 1-%>
                  <% end %>
                    <tr><td height="15px"></td></tr>
              </tbody></table>
              </td>
          </tr>
        </tbody>
      </table>
    <% end %>

      <div class="top10" style="margin:20px 0 0 0">
        <% if @test.parts.size == 0 or @test.parts.size == part_num+1 %>
          <div>
             <a href="#" onclick="checkSelect(<%=part_num%>, 1);">
              <img src="/images/user/prof_surveys/wancheng_07.jpg" width="60" height="26" />
            </a>
          </div>
        <% else %>
          <div><a href="#" onclick="checkSelect(<%=part_num%>, 0);">
              <img src="/images/user/prof_surveys/xiayibu.jpg" width="80" height="26" />
            </a>
          </div>
        <% end %>
      </div>

    </div><!--part列表结束-->

    <% part_num += 1 %>
  <% end %><!--part列表结束-->
<% end %><!--form结束-->
  <br/>
    </div><!--page-->
      </div>

    </div>

  </div>

  <div id="footer">
    <h1>北京心嘉源咨询有限公司 CopyRight © www.iyaoi.cn 2009</h1>
  </div>

<script type="text/javascript">

 //检查有没有漏选的题
  function checkSelect(part_num, status) {
    var objs = document.getElementsByClassName(part_num + "question-value", "testQuestionForm");
    if(objs.length == 0) {
      alert("您的题还没有做完。");
      return false;
    }
    for(var i=0; i<objs.length; i++) {
      if(objs[i].value == "null") {
        alert("您的题还没有做完。");
        return false;
      }
    }

    if(status == 1)
      $("testQuestionForm").submit();
    else
      showEl(part_num);
  }

  //显示下一个子量表的题目
  function showEl(elId){
    part_size = <%= @test.parts.size %> ;

    //隐藏所有part
    for(i=0; i<part_size; i++) {
      $("part" + i).hide();
    }

    $("part" + (elId+1)).show();
  }

  function nextItem(question_id,imgId,itemPosition,itemCount,choiceNumber){
    if(imgId==0)return false;
    var answerObj = document.getElementById(imgId);
    var answer = $("question"+question_id);
    var choice_num = $("question-choice"+question_id);
    var value = document.getElementById("answervalue_"+answerObj.id).value;
    //给选择的答案赋值
    answer.value = value;
    choice_num.value=choiceNumber;
    //取消原来选中的
    var answerObjs = document.forms["testQuestionForm"].elements["itemanswers_"+question_id];
    for(var i=0;i<answerObjs.length;i++){
            var id = answerObjs[i].id;
            id= id.substring(id.indexOf("_")+1);
            document.getElementById(id).src="/images/user/test/chooseblue.gif";
    }

    //换图片
    answerObj.src="/images/user/test/chooseblue2.gif";
    tmpAnswer = answerObj;

  }

var CallTimeLen = "0";
var timer1 = null;

function DoCallTimer()
{
  var minute="0";
     var second="0";
  CallTimeLen = parseInt(CallTimeLen)+1;
  hour=parseInt(CallTimeLen/3600)
  minute = parseInt((CallTimeLen-(hour*3600))/60);
  second = CallTimeLen%60;
  if(minute=="0" &&hour=="0")
  {
   document.getElementById("timer").innerHTML =second+"秒";
  }
  else if (hour=='0')
  {
   document.getElementById("timer").innerHTML=minute+"分"+second+"秒";
  }else
  {
  document.getElementById("timer").innerHTML =hour+"小时"+minute+"分"+second+"秒";
  }
  window.timer1 = window.setTimeout("DoCallTimer()",1000);
}
function stop()
{
 clearTimeout(window.timer1);
}
function settime(){
var now= new Date();
var month=now.getMonth()+1;
var day=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
document.getElementById("start_time").innerHTML = month+"月"+day+"日 "+hour+":"+minute+":"+second
}
</script>
</body>
</html>
